<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--  引入vue.js-->
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        分数：<input type="text" v-model="score">
        <hr>

<!--        对分数做判断，>90分，显示优秀，>80分，显示良好,>60分，显示及格，否则显示不及格-->

<!--        v-if如果计算后的值为true，v-if所在的标签就会显示，否则不显示
            v-if相关指令控制是否显示时，如果对应是false不显示，页面标签不渲染
-->
        <span v-if="score>90">
            <b>优秀</b>
        </span>
        <span v-else-if="score>80">
            <b>良好</b>
        </span>
        <span v-else-if="score>60">
            <b>及格</b>
        </span>
        <span v-else>
            <b>不及格</b>
        </span>

        <hr>
<!--        v-show指令控制是否显示时，如果对应的是false不显示，页面标签渲染，会通过display属性控制显示与隐藏-->
        <span v-show="score>60">
            <b>超过60显示</b>
        </span>

    </div>
</body>

<script>
    new Vue({
        el:"#app",
        //定义数据模型
        data:{
           score:"50"
        },
        //定义vue对象的行为
        methods:{

        }
    });


    function fun1(){
        alert("按钮1....")
    }
</script>

</html>